<template>
    <div>
      <div class="container">
         <lession-item 
            v-for="(item,index) in lessionList" 
            :key="index" 
            :lessionTitle="item.title" 
            :lessionIcon="item.icon">
          </lession-item>  
      </div>      
    </div>
</template>

<script>
import LessionItem from './components/LessionItem.vue'
export default {
  components:{
    LessionItem
  },
  data(){
    return{
      lessionList:[
        {title:'Java全栈开发',icon:'icon-java'},
        {title:'WEB大前端开发',icon:'icon-h5e'},
        {title:'网络安全',icon:'icon-jurassic_safe'},
        {title:'UI开发',icon:'icon-yuanceliang'}
      ]
    }
  }
}
</script>

<style lang="scss">
  .container{
    padding: 10px;
    display: flex;
    align-items: center;
    margin:0 auto;
    width:1000px;
    height: 300px;
    background: #ccc;
  }
</style>